<template>
  <div class="BLSJTJ" v-loading="isLoading">
    <p class="title">事件等级统计</p>
    <div style="margin-bottom: 5px">
      <!-- <el-select
        v-model="时间类别"
        placeholder="请选择时间类别"
        size="small"
        style="width:120px;"
      >
        <el-option
          label="按年"
          value="0"
        >
        </el-option>
        <el-option
          label="按月"
          value="1"
        >
        </el-option>
      </el-select> -->
      <el-cascader
        :options="options_机构"
        :props="props"
        :remove-tag="true"
        collapse-tags
        placeholder="请选择机构"
        size="small"
        @change="handleChange"
        clearable
        v-model="机构_list"
      ></el-cascader>
      <el-radio-group v-model="时间类别" size="small" style="margin-left: 20px">
        <el-radio-button label="按年"></el-radio-button>
        <el-radio-button label="按月"></el-radio-button>
      </el-radio-group>
      <el-select
        v-model="年份区间"
        size="small"
        multiple
        collapse-tags
        style="margin-left: 20px"
        placeholder="请选择年份"
        v-if="时间类别 == '按年'"
      >
        <el-option
          v-for="item in options_年"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="月份区间"
        type="monthrange"
        align="right"
        size="small"
        unlink-panels
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        :picker-options="pickerOptions"
        style="margin-left: 10px"
        value-format="yyyy-MM"
        v-if="时间类别 == '按月'"
      >
      </el-date-picker>
      <el-button
        size="small"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getTable"
        >搜索</el-button
      >
      <el-button
        size="small"
        style="margin-left: 10px"
        @click="toto"
        type="success"
        >导出</el-button
      >
    </div>
    <div
      v-if="table_list.length == 0"
      style="
        text-align: center;
        font-weight: 700;
        line-height: 85vh;
        font-size: 26px;
        background-color: #eee;
        border: 1px solid #ccc;
      "
    >
      请选择机构并选择查询日期区间进行查询
    </div>
    <div class="Table_height">
      <el-table
        v-for="(item, i) in table_list"
        :key="i"
        :data="item.data"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: -1px"
        :show-header="i == 0 ? true : false"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          background: 'rgb(246,250,253)',
          color: '#000000',
        }"
        @cell-click="cell_click"
      >
        <el-table-column
          v-for="(aii, index) in item.data[0]"
          :key="index"
          :prop="index"
          :label="index"
          v-if="index != '机构ID'"
        >
        </el-table-column>
      </el-table>
    </div>
    <div id="myChart" :style="{ width: '100%', height: '25vh' }"></div>
    <!-- 二层弹层 -->
    <el-dialog
      class="new"
      :title="title2"
      :visible.sync="dialogVisible_a"
      width="60%"
      :before-close="handleClose_a"
      :close-on-click-modal="false"
      :append-to-body="true"
      v-loading="isLoading2"
    >
      <el-table
        :data="tableData_a"
        style="width: 100%; margin: 10px"
        height="600"
        :header-cell-style="{
          background: 'rgb(246,250,253)',
          color: '#000000',
        }"
        border
      >
        <el-table-column prop="events.eventno" label="事件编号" />
        <el-table-column prop="eventTypeName" label="事件类型" />
        <el-table-column prop="grade" label="事件等级" />
        <el-table-column prop="patient.name" label="患者姓名" />
        <el-table-column prop="events.occtime" label="发生时间" />
        <el-table-column prop="events.reporttime" label="上报时间" />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <!-- <el-button
                size="mini"
                @click="Look(scope.row.events, 1)"
                type="text"
                >事件状态</el-button
              > -->
            <el-button
              size="mini"
              @click="Look(scope.row.events, 2)"
              type="text"
              >查看表单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_a = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 三层弹层 -->
    <el-dialog
      class="new"
      :visible.sync="dialogVisible_b"
      width="50%"
      :before-close="handleClose_b"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="print" id="print">
        <div class="title_dy">{{ print_data.orgName }}</div>
        <el-row>
          <el-col :span="9">
            <div
              class="title_dy"
              style="font-size: 14px; text-align: left; margin-left: 20px"
            >
              事件编号：
              <span class="border">{{ eventno }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="title_dy" style="font-size: 20px">
              （{{ print_data.typeName }}）
            </div>
          </el-col>
          <el-col :span="9">
            <div
              class="title_dy"
              style="font-size: 14px; text-align: right; margin-right: 20px"
            >
              时间：<span class="border">{{ time | time }}</span>
            </div>
          </el-col>
        </el-row>
        <div v-for="(item, index) in jsonP" :key="index">
          <el-card
            class="box-card"
            style="margin-top: 0px"
            v-if="jsonP[index].groupName !== '鱼骨图'"
          >
            <template>
              <div slot="header" class="clearfix">
                <span class="title-text"
                  ><i class="el-icon-document-remove"></i
                  >{{ jsonP[index].groupName }}</span
                >
              </div>
              <div class="text item">
                <div>
                  <div
                    style="width: 100%"
                    v-for="(kom, index) in item.groupList"
                    :key="index"
                  >
                    <div class="ipt_div_DY" v-if="kom.inputtype !== 5">
                      <span
                        class="ipt-text red dis_DY"
                        v-if="kom.isnull == true"
                      >
                        {{ kom.name }}：
                      </span>
                      <span class="ipt-text dis_DY" v-else
                        >{{ kom.name }}：</span
                      >
                      <span class="value" v-if="kom.inputtype == 1">{{
                        kom.value
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 2">{{
                        kom.selectValue
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 3">{{
                        kom.checkboxValue
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 4">{{
                        kom.radioValue
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 6">{{
                        kom.date
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 8">{{
                        kom.datetime
                      }}</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    style="width: 100%"
                    v-for="(kom, indx) in item.groupList"
                    :key="indx"
                  >
                    <div class="ipt_divw" v-if="kom.inputtype == 5">
                      <span
                        class="ipt-text red dis_DY"
                        v-if="kom.isnull == true"
                      >
                        {{ kom.name }}：
                      </span>
                      <span class="ipt-text dis_DY" v-else
                        >{{ kom.name }}：</span
                      >
                      <span class="value" v-if="kom.inputtype == 5">{{
                        kom.textareaValue
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-card>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_b = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { export_json_to_excel } from "@/vendor/Export2Excel";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      table_list: [],
      时间类别: "按年",
      年份区间: [],
      options_年: [
        {
          value: "2018",
          label: "2018年",
        },
        {
          value: "2019",
          label: "2019年",
        },
        {
          value: "2020",
          label: "2020年",
        },
        {
          value: "2021",
          label: "2021年",
        },
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2023",
          label: "2023年",
        },
        {
          value: "2024",
          label: "2024年",
        },
        {
          value: "2025",
          label: "2025年",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      月份区间: "",
      props: { multiple: true },
      options_机构: [],
      机构_list: [],
      查询机构: [],
      图表日期: [],
      图表数据: [],
      图表lable: ["一级", "二级", "三级", "四级", "总数"],
      isLoading: false,
      // 穿透
      dialogVisible_a: false,
      dialogVisible_b: false,
      tableData_a: [],
      title2: "",
      time: "",
      print_data: {},
      jsonP: {},
      eventno: "",
      isLoading2: false,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getopson();
    // this.getTable()
  },
  // 组件方法
  methods: {
    getopson() {
      this.$post(baseUrl.hrIP + "/auth/organs/searchlist").then((res) => {
        this.options_机构 = res.data;
      });
    },
    getTable() {
      this.isLoading = true;
      this.图表日期 = [];
      var body = {
        orgid: this.查询机构,
        type: this.时间类别 == "按年" ? 0 : 1,
        yearList: this.年份区间,
        startDate: this.月份区间[0],
        endDate: this.月份区间[1],
      };
      this.$post("/Aers/Statistics/GetDengJi", body).then((res) => {
        this.table_list = res.data;

        this.图表数据 = [];
        var item1 = {
          name: "一级",
          type: "line",
          data: [],
        };
        var item2 = {
          name: "二级",
          type: "line",
          data: [],
        };
        var item3 = {
          name: "三级",
          type: "line",
          data: [],
        };
        var item4 = {
          name: "四级",
          type: "line",
          data: [],
        };
        var item5 = {
          name: "总数",
          type: "line",
          data: [],
        };
        for (var i in res.data) {
          this.图表日期.push(res.data[i].type);
          item1.data.push(res.data[i].data[res.data[i].data.length - 1].一级);
          item2.data.push(res.data[i].data[res.data[i].data.length - 1].二级);
          item3.data.push(res.data[i].data[res.data[i].data.length - 1].三级);
          item4.data.push(res.data[i].data[res.data[i].data.length - 1].四级);
          item5.data.push(res.data[i].data[res.data[i].data.length - 1].总数);
        }
        this.图表数据 = [item1, item2, item3, item4, item5];
        this.drawLine();
        this.isLoading = false;
      });
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: this.table_list[0].data.length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption(
        {
          title: {
            text: "合计走势图",
          },
          tooltip: {
            show: true,
            trigger: "axis",
            formatter: function (params) {
              let relVal = params[0].name;
              for (let i = 0, l = params.length; i < l; i++) {
                if (params[i].seriesName == "三级") {
                  relVal +=
                    "<br/>" +
                    params[i].marker +
                    params[i].seriesName +
                    " : " +
                    "" +
                    params[i].value +
                    " " +
                    "";
                } else {
                  relVal +=
                    "<br/>" +
                    params[i].marker +
                    params[i].seriesName +
                    " : " +
                    params[i].value +
                    " " +
                    "人";
                }
              }
              return relVal;
            },
          },
          legend: {
            data: this.图表lable,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.图表日期,
          },
          yAxis: {
            type: "value",
          },
          series: this.图表数据,
        },
        true
      );
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.机构名称 == "合计") {
        return "warning-row";
      }
    },
    toto() {
      var item = this.table_list[0].data[0];
      var flag = this.时间类别;
      var list = [];
      var table = [];
      for (var i in item) {
        list.push(i);
      }
      for (var j in this.table_list) {
        for (var k in this.table_list[j].data) {
          table.push(this.table_list[j].data[k]);
        }
      }
      const tHeader = list; // 表格头部
      const filterVal = list; // 表格头部对应的数据字段名，用来过滤
      const filename = "三级（" + flag + "）";
      const data = this.formatJson(filterVal, table);
      export_json_to_excel({
        header: tHeader,
        data,
        filename,
      });
    },
    formatJson(filterVal, tableData) {
      return tableData.map((v) => {
        return filterVal.map((j) => {
          return v[j];
        });
      });
    },
    // 穿透
    handleChange(value) {
      let beforList = [];
      let newList = [];
      for (var i in value) {
        for (var j in value[i]) {
          beforList.push(value[i][j]);
        }
      }
      for (var i = 0; i < beforList.length; i++) {
        //如果当前数组的第i已经保存进了临时数组，那么跳过，
        //否则把当前项push到临时数组里面
        if (newList.indexOf(beforList[i]) === -1) {
          //indexOf() 判断数组中有没有字符串值，如果没有则返回 -1
          newList.push(beforList[i]);
        }
      }

      this.查询机构 = newList;
    },
    cell_click(row, column) {
      this.isLoading = true;
      this.title2 = row.机构名称;
      var body = {
        orgid: [row.机构ID],
        type: this.时间类别 == "按年" ? 0 : 1,
        yearList: this.年份区间,
        startDate: this.月份区间[0],
        endDate: this.月份区间[1],
        SecondKey: column.label,
      };
      if (row.月份) {
        body.monthValue = row.月份;
      }
      if (row.年份) {
        body.yearValue = row.年份;
      }
      if (column.label == "总数") {
        body.SecondKey = "等级总数";
      }
      this.$post("/Aers/Statistics/GetSecondList", body).then((res) => {
        this.tableData_a = res.data.list;
        this.dialogVisible_a = true;
        this.isLoading = false;
      });
    },
    handleClose_a() {
      this.dialogVisible_a = false;
    },
    handleClose_b() {
      this.dialogVisible_b = false;
    },
    Look(row, flag) {
      this.isLoading2 = true;
      this.eventno = row.eventno;
      this.$get("/Aers/ReportEvent/GetItemPrint?id=" + row.id).then((res) => {
        this.time = res.data.createDate;
        this.print_data = res.data;
        this.jsonP = JSON.parse(res.data.json).list;
        this.dialogVisible_b = true;
        this.isLoading2 = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.BLSJTJ {
  padding: 8px;
  .title {
    font-size: 18px;
    font-weight: 700;
    color: rgb(116, 182, 237);
  }
  .Table_height {
    height: 60vh;
    overflow: auto;
  }
  ::v-deep .el-date-editor .el-range-separator {
    padding: 0 !important;
  }
  ::v-deep .el-table .warning-row {
    background: rgb(197, 224, 119) !important;
    font-weight: 700;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  ::v-deep .el-table__header-wrapper {
    position: fixed;
    // top: 80px;
    z-index: 99;
  }
  ::v-deep .el-table__body-wrapper {
    margin-top: 30px;
  }
}
::v-deep .el-cascader__tags {
  flex-wrap: initial;
}
::v-deep .el-cascader__tags .el-tag {
  max-width: 75%;
}

// 打印
.topDiv {
  height: 60px;
  width: 100%;
  line-height: 60px;
  position: fixed;
  top: 46px;
  z-index: 999;
  background: #e8f2fe;
}
.title-text {
  color: #1e8bc2;
  font-weight: bold;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.el-card .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 20px;
}
.card-ipt {
  width: 200px;
}
.red {
  font-weight: 600;
  color: #ff0000;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.ipt-area {
  margin-top: 20px;
}
.mt20 {
  margin-top: 20px;
}
.border {
  border-bottom: 1px solid #ccc;
}
.ipt_div {
  width: 50%;
  /* min-height: 50px; */
  margin-bottom: 10px;
  float: left;
  /* margin-bottom: -10px; */
}
.ipt_div_DY {
  width: 33%;
  /* min-height: 50px; */
  margin-bottom: 10px;
  float: left;
}
.ipt_divw {
  width: 100%;
  /* min-height: 80px; */
  float: left;
  margin-bottom: 3px;
}
.ipt_divw span {
  width: 100%;
  height: 30px;
  display: block;
}
.dis {
  width: 180px;
  display: block;
  float: left;
}
.dis_DY {
  display: block;
  float: left;
}
.yuguName {
  width: 300px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
}
.wrap:nth-child(2) .divwrap .yuguName {
  width: 300px;
  height: 660px;
  line-height: 660px;
  border-bottom: 1px solid #ccc;
}

.yugudiv {
  height: 60px;
  white-space: nowrap;
  overflow: hidden;
}
.yuguspan {
  width: 100px;
  /* height: 60px; */
  /* line-height: 60px; */
  border-bottom: 1px solid #ccc;
}
.yugudiv2 {
  height: 60px;
  border-bottom: 1px solid #ccc;
}
.divwrap .yugudiv:nth-child(2) {
  height: 120px !important;
}
.divwrap .yugudiv:nth-child(2) .yuguspan {
  width: 100px;
  /* height: 120px !important; */
  /* line-height: 120px !important; */
  border-bottom: 1px solid #ccc;
}
.divwrap .yugudiv:nth-child(2) .yugudiv2 {
  height: 120px !important;
  border-bottom: 1px solid #ccc !important;
}
.yugudivnull {
  width: 100%;
  float: left;
  border-bottom: 1px solid #ccc;
  height: 80px;
}
.yugudivnullspan {
  display: block;
  width: 300px;
  height: 80px;
  line-height: 80px;
}
.box-warp {
  float: left;
}
.box-warp > a {
  display: flex;
  color: #333;
  margin-left: 10px;
}
.p {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
}
.checked {
  color: red !important;
}
::v-deep .el-input.is-disabled .el-input__inner {
  color: #000 !important;
}
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #000;
}
::v-deep .el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  border-color: #000;
}
.value {
  display: inline-block;
  border-bottom: 1px solid #000;
  min-width: 60px;
}
/* 打印 */
.title_dy {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
.border {
  border-bottom: 1px solid #000;
}
</style>
